﻿<aside id="actions">
    <h3>Actions</h3>
    <div class="action" data-bind="click: gotoMain">
        <p>Main</p>
    </div>
    <div class="action" data-bind="click: gotoMonster">
        <p>Attack monster</p>
    </div>
    <div class="action" data-bind="click: gotoPlayer">
        <p>Attack player</p>
    </div>
    <div class="action" data-bind="click: gotoHeal">
        <p>Train</p>
    </div>
    <div class="action" data-bind="click: gotoShop">
        <p>Shop</p>
    </div>
</aside>
<div id="display">
    <h3>Shop</h3>
    <div data-bind="source: items" data-template="shop-item-template"></div>
</div>
<script type="text/x-kendo-template" id="shop-item-template">
    <div class="shop-item" data-bind="click: listener, attr: { id: itemId }">
        <img data-bind="attr: { src: imageUrl }" />
        <p data-bind="text: name"></p>
    </div>
</script>
